import { createApp } from 'vue'
import elementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/styles/index.scss'
import App from './App.vue'
import { useIntersectionObserver } from '@vueuse/core'
import router from './router'
import pinia from './store'
//@ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' // 中文国际化配置  ts没有对应的类型检测，无法打包成功
// svg插件需要配置代码
import 'virtual:svg-icons-register'
import globalComponent from '@/components/index'
import './permission'
import { isHasButton } from './directive/has' // 按钮权限 自定义指令
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'
console.log('import.meta.env', import.meta.env) // 获取环境变量
const app = createApp(App)
// @ts-ignore
app.use(VideoPlayer)

app.use(elementPlus, {
  locale: zhCn,
})
isHasButton(app) // 这里的写法有点奇怪..

/*app.directive('xxx', {
    mounted(el, bindings) {
        console.log("xxx")
    }
})
app.directive('yyy', {
    mounted(el, bindings) {
        console.log("yyy")
    }
})*/

//定义全局指令(定义图片懒加载指令)
app.directive('img-lazy', {
  mounted(el, binding) {
    //el指令绑定到的元素。这可以用于直接操作 DOM
    //binding: binding.value 指令等于后面绑定表达式的值 图片url
    const { stop } = useIntersectionObserver(
      el, //要监听谁把谁传过来
      ([{ isIntersecting }]) => {
        console.log(isIntersecting)
        /* 实现 渲染 懒加载 功能*/
        // el.src = binding.value
        stop() // 第一次加载完成之后停止监听
      },
    )
  },
})
// 使用  <img v-img-lazy="url" alt="" />
app.use(globalComponent)
app.use(pinia)
app.use(router)
app.mount('#app')
